<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/MkPlatform.css" media="only screen and (max-height:1600px) ">
    <!-- 手机App -->
    <link rel="stylesheet" href="../static/css/MkPlatformApp.css" media="only screen and (min-height:1600px) ">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul class="header-text">
                                <li>
                                    <h8 style="line-height: 78px; ">平台小微看板</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content ">
                        <div class="card_header ">
                            <div class="card D " style="background-color: #33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>小微</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="WaitPrtQty ">{{total}}家</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C " style="background: #33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>年度交易数</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="Waitcompleted ">{{Quantity}}单</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card_header ">
                            <div class="card C " style="background:#33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>年销售额</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="MKTransac ">{{Amt}}</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C B " style="background: #33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>年累计提现</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="cardAMT ">{{AmtOff}}</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="body_div">
            <div class="main-left ">
                <div class="Price Price-left ">
                    <div class="border-container ">
                        <div class="name-title ">
                            小V交易单数排名
                        </div>
                        <el-table :data="defaultDt2" :height=left_el_table_height stripe="true "  ref="defaultDt2">
                            <el-table-column type="index" width=100 label="序号">
                            </el-table-column>
                            <el-table-column prop="MkCode" align="center" label="小微">
                            </el-table-column>
                            <el-table-column prop="Qunatity" align="center" label="交易单数">
                            </el-table-column>
                        </el-table>
                        <span class="top-left border-span "></span>
                        <span class="top-right border-span "></span>
                        <span class="bottom-left border-span "></span>
                        <span class="bottom-right border-span "></span>
                    </div>
                </div>
                <div class="Price Price-left ">
                    <div class="border-container ">
                        <div class="name-title ">
                            小V销售额排名
                        </div>
                        <el-table :data="defaultDt1" :height=left_el_table_height stripe="true "  ref="defaultDt1">
                            <el-table-column type="index" width=100  label="序号">
                            </el-table-column>
                            <el-table-column prop="MkCode"  align="center" label="小微 ">
                            </el-table-column>
                            <el-table-column prop="Amt" align="center" label="年销售额 ">
                            </el-table-column>
                        </el-table>
                        <span class="top-left border-span "></span>
                        <span class="top-right border-span "></span>
                        <span class="bottom-left border-span "></span>
                        <span class="bottom-right border-span "></span>
                    </div>
                </div>

            </div>

            <div class="center ">
                <div class="MkCode border-container ">
                    <div class="name-title ">
                        月度交易数
                    </div>
                    <div id="One" style="width: 100%;height: 260px;"></div>
                    <span class="top-left border-span "></span>
                    <span class="top-right border-span "></span>
                    <span class="bottom-left border-span "></span>
                    <span class="bottom-right border-span "></span>
                </div>
                <div class="MkCode border-container ">
                    <div class="name-title ">
                        月度销售额
                    </div>
                    <div id="Two" style="width: 100%;height: 260px;"></div>
                    <span class="top-left border-span "></span>
                    <span class="top-right border-span "></span>
                    <span class="bottom-left border-span "></span>
                    <span class="bottom-right border-span "></span>
                </div>
                <div  class="MkCode border-container ">
                    <div class="name-title ">
                        月度提现额
                    </div>
                    <div id="Three" style="width: 100%;height: 260px;"></div>
                    <span class="top-left border-span "></span>
                    <span class="top-right border-span "></span>
                    <span class="bottom-left border-span "></span>
                    <span class="bottom-right border-span "></span>
                </div>
            </div>
        </div>
    </div>

    </body>



    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    left_el_table_height: 350,
                    defaultDt1: [],
                    defaultDt2:[],
                    total:0,
                    Quantity:0,
                    Amt: 0,
                    AmtOff: 0,
                    option1: {
                        tooltip: {
                            trigger: 'axis' //鼠标悬浮上去显示
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisLabel: {
                                textStyle: {
                                    color: "#FFF"
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: "#FFF"
                                }
                            }
                        },
                        series: [{
                            symbol: "circle",
                            data: [150, 230, 224, 218, 135, 147, 260, 300, 1000, 850, 200],
                            type: 'line',
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: '#f28e0c'
                                },

                            },
                            itemStyle: {
                                normal: {
                                    color: '#f28e0c',
                                    label: {
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        },
                                        show: true,
                                        color: "#FFF"
                                    }
                                }
                            }
                        }]
                    },
                    option2: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        textStyle: {
                            color: '#00FFFFF'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        color: 'white',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: { //改变xy轴上文字的颜色
                                color: "#FFF"
                            }
                        }
                    },
                    series: [{
                        data: [],
                        type: 'bar',
                        itemStyle: { //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'white'
                                    }
                                }
                            }
                        }
                    }]
                },
                    option3: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        legend: {
                            textStyle: {
                                color: '#00FFFFF'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            color: 'white',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                textStyle: {
                                    color: "#FFF"
                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}',
                                textStyle: { //改变xy轴上文字的颜色
                                    color: "#FFF"
                                }
                            }
                        },
                        series: [{
                            data: [],
                            type: 'bar',
                            itemStyle: { //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'white'
                                        }
                                    }
                                }
                            }
                        }]
                    },
                }
            },
            methods: {
                GetTabelDate(that) {
                    //小微
                    GetCodeData("VB21110314264934", "Get", "Goods").then(function(res) {
                        that.total = res.rows[0].total
                    }),
                        //年交易单数
                        GetCodeData("VB21121114512288", "Get", "Goods").then(function(res) {
                            that.Quantity = res.rows[0].Quantity
                        }),
                        //年销售额
                        GetCodeData("VB21121114521586", "Get", "Goods").then(function(res) {
                            that.Amt = res.rows[0].Amt
                        }),
                        //年累计提现
                        GetCodeData("VB21121114523418", "Get", "Goods").then(function(res) {
                            that.AmtOff = res.rows[0].AmtOff
                        }),
                        //小微年度销售额排名
                        GetCodeData("VB21121114491232", "Get", "Goods").then(function(res) {
                            that.defaultDt1 = res.rows
                        }),
                        //小微年度交易数排名
                        GetCodeData("VB21121114493523", "Get", "Goods").then(function(res) {
                            that.defaultDt2 = res.rows
                        }),
                        //月度交易数
                        GetCodeData("VB21121114500222", "Get", "Goods").then(function(res) {
                            var 月度交易数 = []
                            res.rows.forEach(element => {
                                Object.values(element).forEach(item => {
                                    if (element.type == "月度交易数") {
                                        if (typeof(item) == "number") {
                                            月度交易数.push(item)
                                        }
                                    }
                                })
                            })
                        that.option1.series[0].data = 月度交易数;
                        that.One.setOption(that.option1);
                        }),
                        //月度销售额
                        GetCodeData("VB21121114502490", "Get", "Goods").then(function(res) {
                            var 销售额 = []
                            res.rows.forEach(element => {
                                Object.values(element).forEach(item => {
                                    if (element.type == "销售额") {
                                        if (typeof(item) == "number") {
                                            销售额.push(item)
                                        }
                                    }
                                })
                            })
                        that.option2.series[0].data = 销售额;
                        that.Two.setOption(that.option2);
                        }),
                        //月度累计提现
                        GetCodeData("VB21121114504023", "Get", "Goods").then(function(res) {
                            var 月度累计提现 = []
                            res.rows.forEach(element => {
                                Object.values(element).forEach(item => {
                                    if (element.type == "月度累计提现") {
                                        if (typeof(item) == "number") {
                                            月度累计提现.push(item)
                                        }
                                    }
                                })
                            })
                        that.option3.series[0].data = 月度累计提现;
                        that.Three.setOption(that.option3);
                        })
                },
            },

            mounted() {
                TableAotoRoll([this.$refs.defaultDt1,this.$refs.defaultDt2])
                var that = this
                setTimeout(function() {
                    that.One = echarts.init(document.getElementById('One')),
                        that.GetTabelDate(that);
                    that.Two = echarts.init(document.getElementById('Two')),
                        that.GetTabelDate(that);
                    that.Three = echarts.init(document.getElementById('Three')),
                        that.GetTabelDate(that);
                }, 0);
                setInterval(function() {
                    that.GetTabelDate(that)
                }, 1000 * 60);
            }
        })
    </script>



</html>